<template name="DeliciousFoodList">
	<!-- 附近商圈店铺列表 -->
	<view class="">
		<u-row class="SQBOX-item" v-for="(item,index) in SQData" :key="index" @click="success(item)">
			<u-col span="3" style="display: flex;align-items: center;justify-content: center;">
				<u-image width="130rpx" height="130rpx" :src="item.merchantImage"></u-image>
			</u-col>
			<u-col span="6">
				<view class="SQBOX-item-name u-line-1">{{item.merchantShortName}}</view>
				<view class="SQBOX-item-address u-line-2">地址：{{item.merchantAddress}}</view>
			</u-col>
			<u-col span="3"
				style="display: flex;align-items: center;justify-content: flex-end;padding-right: 30rpx;">
				<u-icon name="map-fill" color="#FF6801" size="30"></u-icon>
				<text style="font-size: 24rpx;">{{item.distance}}</text>
			</u-col>
		</u-row>
	</view>
</template>

<script>
export default {
	name: "DeliciousFoodList",
	data() {
		return {
			SQData: []
		}
	},
	props: { //此处定义传入的参数
		list: {
			type: Array
		},
	},
	watch: {
		'list': {
			handler(list) {
				if (list) {
					this.SQData = list;
				}
			},
			immediate: true
		},
	},
	methods: {
		success(item) {
			this.$emit('success', item); 
		}
	}
}
</script>

<style lang="scss" scoped>
	.SQBOX-item {
		border-bottom: 1px solid #f2f2f2;
		padding: 12px 0;
	}
	
	.SQBOX-item-name {
		font-size: 32rpx;
		margin-bottom: 10rpx;
		font-weight: bold;
		color: #333;
	}
	
	.SQBOX-item-address {
		font-size: 28rpx;
		color: #82848A;
	}
</style>
